<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="注册时间">
        <el-date-picker
            v-model="formInline.date1"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间">
        </el-date-picker>
        -
        <el-date-picker
            v-model="formInline.date2"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-radio-group v-model="formInline.verificationStatus">
          <el-radio :label="0">待审核</el-radio>
          <el-radio :label="1">审核通过</el-radio>
          <el-radio :label="2">审核不通过</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.name" placeholder="请输入用户名、用户手机号查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage1">重置</el-button>
        <el-button type="primary" @click="findPage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="序号">
      </el-table-column>
      <el-table-column
          fixed
          prop="userId"
          label="用户ID">
      </el-table-column>
      <el-table-column
          fixed
          prop="userName"
          label="用户名称">
      </el-table-column>
      <el-table-column
          prop="userPhoto"
          label="当前头像">
      </el-table-column>
      <el-table-column
          width="150px"
          prop="userPhone"
          label="用户手机号">
      </el-table-column>
      <el-table-column
          prop="userSex"
          label="用户性别">
        <template slot-scope="scope">
          {{ scope.row.userSex == 1 ? '男' : scope.row.userSex == 2 ? '女' : '未知' }}
        </template>
      </el-table-column>
      <el-table-column
          width="150px"
          prop="userBirthday"
          label="生日">
      </el-table-column>
      <el-table-column
          prop="userAge"
          label="年龄">
      </el-table-column>
      <el-table-column
          width="180px"
          prop="userEmail"
          label="邮箱">
      </el-table-column>
      <el-table-column
          width="180px"
          prop="drivingValidity"
          label="驾照有效期">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.drivingValidity<=NewDate" type="danger">{{ scope.row.drivingValidity }}</el-tag>
          <el-tag v-else type="success">{{ scope.row.drivingValidity }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="registeredCity"
          label="注册时所在城市">
      </el-table-column>
      <el-table-column
          prop="administrativeRegion"
          label="注册时所在行政区">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="loginTime"
          label="最近一次登录时间">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="registrationTime"
          label="注册时间">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="submissionTime"
          label="提交审核时间">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="approvalTime"
          label="审核通过时间">
      </el-table-column>
      <el-table-column
          fixed="right"
          prop="verificationStatus"
          label="审核状态">
        <template slot-scope="scope">
          {{
            scope.row.verificationStatus == 1 ? '审核通过' : scope.row.verificationStatus == 2 ? '审核不通过' : '待审核'
          }}
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          prop="verifier"
          label="审核人">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="xq(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        title="司机及车辆详情"
        :visible.sync="dialogVisible"
        width="80%">
      <h3>司机信息</h3>
      <img :src="driver.userPhoto" style="width: 100px;height: 100px; float: left;">
      <h4>{{ driver.userName }}</h4>
      性别：{{ driver.userSex == 1 ? '男' : driver.userSex == 2 ? '女' : '未知' }} &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      生日：{{ driver.userBirthday }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      年龄：{{ driver.userAge }}<br>
      手机号：{{ driver.userPhone }}&emsp;&emsp;&emsp;
      邮箱：{{ driver.userEmail }}&emsp;&emsp;&emsp;
      驾照有效期：{{ driver.drivingValidity }} <br>
      城市：{{ driver.registeredCity }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      行政区：{{ driver.administrativeRegion }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      注册时间：{{ driver.registrationTime }} <br>
      <el-divider></el-divider>
      <h3>车辆信息</h3>
      <img :src="driver.carPhoto" style="width: 100px;height: 100px; float: left;"></img>
      车辆类型：{{
        driver.carType == 1 ? '经济型' : driver.carType == 2 ? '舒适型' : driver.carType == 3 ? '豪华型' : '商务型'
      }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      车牌号：{{ driver.licencePlate }}<br>
      车辆型号：{{ driver.vehicleModel }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      车辆品牌：{{ driver.brand }}<br>
      厂家：{{ driver.vender }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      能源类型：{{ driver.energyType }} <br>
      发动机号/电动机号：{{ driver.deviceNumber }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      车辆VIN码：{{ driver.vin }} <br>
      车龄：{{ driver.vehicleAge }}
      <el-divider></el-divider>
      <h3>审核信息</h3>
      司机提交审核时间：{{ driver.submissionTime }}&emsp;&emsp;&emsp;&emsp;
      司机的审核状态：{{
        driver.verificationStatus == 1 ? '审核通过' : driver.verificationStatus == 2 ? '审核不通过' : '待审核'
      }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      <el-button v-if="driver.verificationStatus == 0" type="primary" @click="aa(driver.userId)">
        审核
      </el-button>
      <br>
      司机的审核通过时间：{{ driver.approvalTime }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      审核人：{{ driver.verifier }}
    </el-dialog>

    <el-dialog
        :visible.sync="dialogVisible1"
        width="30%">
      &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      <el-button @click="updateVerificationStatus(2)">拒绝</el-button>
      <el-button type="primary" @click="updateVerificationStatus(1)">同意</el-button>

    </el-dialog>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      userId: null,
      car: {},
      driver: {},
      dialogVisible: false,
      dialogVisible1: false,
      NewDate: null,
      formInline: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      tableData1: []
    }
  },
  methods: {
    aa(userId) {
      this.dialogVisible1 = true;
      this.userId = userId;
    },
    updateVerificationStatus(status) {
      axios.get(`http://localhost:9999/api-function/driver/updateVerificationStatus?userId=${this.userId}&status=${status}`).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.dialogVisible1 = false;
          this.findPage();
          this.xq(this.driver);
        } else {
          this.$message({
            message: '操作失败',
            type: 'error'
          });
        }
      })
    },
    xq(row) {
      this.driver = {}
      this.dialogVisible = true;
      axios.get(`http://localhost:9999/api-function/driver/findById?userId=${row.userId}`).then(res => {
        this.driver = res.data.data;
        console.log(this.driver);
      })
    },
    findPage1() {
      this.formInline = {};
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findPage();
    },
    findPage() {
      axios.post(`http://localhost:9999/api-function/driver/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        console.log(this.tableData);
      })
    }
  }
  ,
  created() {
    this.findPage();

    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    this.NewDate = formatDate(new Date());
    console.log(this.NewDate);
  }
}
</script>
<style scoped>

</style>
